<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
    <head>
        <meta charset="utf-8">
        <title th:text="${flowType=='main'?'话术配置':'多轮会话配置'}">话术配置</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="format-detection" content="telephone=no">
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
        <link rel="stylesheet" th:href="@{/css/speakingSkill/demo.css}" >
        <link rel="stylesheet" th:href="@{/css/speakingSkill/jsplumbtoolkit-defaults.css}" >
        <link rel="stylesheet" th:href="@{/js/layui/css/layui.css}"  media="all" />
        <link rel="stylesheet" th:href="@{/css/public.css}"  media="all" />
        <link rel="stylesheet" th:href="@{/css/flowSetting/flowSetting.css}"  media="all" />
    </head>
    <body style="width:100%;-webkit-backface-visibility: hidden;">
        <div id="main" class="main">
            <div class="header">
                <fieldset class="layui-elem-field" >
                    <legend style="font-size: large;font-weight: bold;" th:text="${flowType=='main'?'话术配置':'多轮会话配置'}">话术配置</legend>
                    <div class="layui-field-box">
                        <div class="layui-inline" style="display: none" sec:authorize = "hasAuthority('ROLE_BTN_linkcall:flowConfig:setting:flows:save')">
                            <a class="layui-btn  layui-btn-sm" id="add_nomal"><i class="layui-icon">&#xe654;</i>添加普通话术</a>
                        </div>
                        <div class="layui-inline" style="display: none" sec:authorize = "hasAuthority('ROLE_BTN_linkcall:flowConfig:setting:flows:save')">
                            <a class="layui-btn  layui-btn-sm" id="add_redirect"><i class="layui-icon">&#xe654;</i>添加跳转话术</a>
                        </div>
                        <div class="layui-inline" sec:authorize = "hasAuthority('ROLE_BTN_linkcall:flowConfig:setting:flows:save')">
                            <a class="layui-btn  layui-btn-sm" id="add_flow_step_c"><i class="layui-icon">&#xe654;</i>添加普通话术</a>
                        </div>

                        <div class="layui-inline" sec:authorize = "hasAuthority('ROLE_BTN_linkcall:flowConfig:setting:flows:save')">
                            <a class="layui-btn  layui-btn-sm" id="add_flow_step_s"><i class="layui-icon">&#xe654;</i>添加跳转话术</a>
                        </div>

                        <div class="layui-inline" style="float: right;margin-left:5px;" sec:authorize = "hasAuthority('ROLE_BTN_linkcall:flowConfig:setting:flows:save')">
                            <a class="layui-btn  layui-btn-sm" id="saveFlow"><i class="layui-icon">&#xe642;</i>保存流程</a>
                        </div>
                        <th:block th:if="${flowType == 'main'}">
                            <div class="layui-inline" style="margin-left: 5px;margin-right:5px;float: right;" sec:authorize = "hasAuthority('ROLE_BTN_linkcall:flowConfig:setting:flows:save')">
                                <a class="layui-btn  layui-btn-sm" id="setFlowSort"><i class="layui-icon">&#xe642;</i>设置流程顺序</a>
                            </div>
                        </th:block>

                        <div class="layui-inline" style="float: right;display: none" sec:authorize = "hasAuthority('ROLE_BTN_linkcall:flowConfig:setting:flows:save')">
                            <a class="layui-btn  layui-btn-sm" id="save"><i class="layui-icon">&#xe654;</i>保存</a>
                        </div>


                        <div class="layui-inline"  style="float: right;" sec:authorize = "hasAuthority('ROLE_BTN_linkcall:flowConfig:setting:flows:save')">
                            <a class="layui-btn  layui-btn-sm" id="resetOld"><i class="layui-icon">&#xe669;</i>回退到原流程</a>
                        </div>

                        <div class="layui-inline"  style="float: right;display: none" sec:authorize = "hasAuthority('ROLE_BTN_linkcall:flowConfig:setting:flows:save')">
                            <a class="layui-btn  layui-btn-sm" id="reset"><i class="layui-icon">&#xe669;</i>回退到原流程</a>
                        </div>

                        <div class="layui-inline"  style="float: right;display: none" sec:authorize = "hasAuthority('ROLE_BTN_linkcall:flowConfig:setting:flows:save')">
                            <a class="layui-btn  layui-btn-sm" id="exportCurFlow"><i class="layui-icon">&#xe669;</i>导出当前流程结果</a>
                        </div>
                    </div>
                </fieldset>
            </div>
            <div class="content">
                <!--<div style="top:110px;height:58px;width: 200px; padding-top: 15px; padding-bottom: 5px;text-align: center;background-color: #F1F1F1">
                </div>-->
                <div  id="leftDiv" class="layui-side" >
                    <div class="layui-inline" sec:authorize = "hasAuthority('ROLE_BTN_linkcall:flowConfig:setting:flows:add')">
                        <a class="layui-btn layui-btn-sm" id="add_flow"><i class="layui-icon">&#xe654;</i>添加流程</a>
                    </div>
                    <div class="flowDivs" id="flowDivs" th:fragment="flowDivs" >
                        <th:block th:if="${flows!=null}">
                            <div th:title="${it.flowName}" th:each="it:${flows}"  th:id="${it.id}" onclick="loadFlowDiv(this.id)" class="flowDiv"
                                th:text="${it.flowName}" th:value="${it.flowJsonStr}" th:sortNum="${it.sortNum}">
                            </div>
                        </th:block>
                    </div>
                </div>
                <div class="mianDiv" >
                    <div class="jtk-demo-canvas flowchart-demo jtk-surface jtk-surface-nopan" id="canvas" style="margin-bottom: 50px;">
                    </div>
                   <!--节点操作-->
                    <div class="todoMenu nodeMenu">
                        <div class="editNode" sec:authorize = "hasAuthority('ROLE_BTN_linkcall:flowConfig:setting:flows:save')">编辑节点</div>
                        <div class="deleteNode" sec:authorize = "hasAuthority('ROLE_BTN_linkcall:flowConfig:setting:flows:save')">删除节点</div>
                        <!--<div class="nodeSet">会话设置</div>-->
                    </div>
                    <div class="todoMenu pathMenu">
                        <!--<div class="pathSet">连接设置</div>-->
                        <div class="deletePath" sec:authorize = "hasAuthority('ROLE_BTN_linkcall:flowConfig:setting:flows:save')">删除连接</div>
                    </div>

                    <!--流程编辑-->
                    <div class="todoMenu flowMenu">
                        <div class="editFlow" sec:authorize = "hasAuthority('ROLE_BTN_linkcall:flowConfig:setting:flows:edit')">编辑流程</div>
                        <div class="deleteFlow" sec:authorize = "hasAuthority('ROLE_BTN_linkcall:flowConfig:setting:flows:del')">删除流程</div>
                    </div>
                </div>
            </div>
        </div>
        <script th:inline="javascript">
            const baseUrl = [[${#servletContext.contextPath}]];
            const packageId = [[${packageId}]];
            const existsFlows = [[${flows}]];
            const flowType = [[${flowType}]];
        </script>
       <script th:src="@{/js/jquery-1.7.2.min.js}"></script>
        <script type="text/javascript" th:src="@{/js/layui/layui.js}"></script>
        <script th:src="@{/js/jsplumb/jsplumb.js}"></script>
        <script th:src="@{/js/jsplumb/demo.js(v=${new java.util.Date().getTime()})}"></script>
        <script type="text/javascript">
            /*$(document).ready(function(){
                var heightVal = $(document).height()-20;//整个网页的高度 - padding
                console.log(heightVal);
                $(".childrenBody").css("height",heightVal);
            });*/
            window.onload = windowHeight; //页面载入完毕执行函数
            function windowHeight() {
                var h = document.documentElement.clientHeight; //获取当前窗口可视操作区域高度
                var w = document.body.clientWidth;//网页可见区域宽
                var bodyHeight = document.getElementById("main"); //寻找ID为content的对象
                if(h<200){
                    if(window.screen.availHeight>500){
                        h = window.screen.availHeight - 300;
                    }else{
                        h = 650;
                    }
                }
//                bodyHeight.style.height = (h - 20) + "px"; //你想要自适应高度的对象

                //load 第一个flow的流程
                if($("#flowDivs").children()!=undefined && $("#flowDivs").children().length>0){
                    if($("#flowDivs").children().first()!=undefined && $("#flowDivs").children().first().length>0){
                        $("#flowDivs").children().first().click();
                    }
                }
            }
        </script>
        <script th:src="@{/js/page/speakingSkill/flowSetting.js(v=${new java.util.Date().getTime()})}"></script>
        <script type="text/javascript"   th:src="@{/js/page/utils.js}"></script>
    </body>
</html>